<template>
  <div>
    <chartContent title="各医院平均费用"> 
        <div id="chargeContainer" style="width: 22.7vw; height: 33.19vh;"></div>
    </chartContent>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, watch } from "vue";
import * as echarts from "echarts";
import chartContent from "./chartContent.vue";
const props = defineProps(["data"]);
let chargeChart = null;
watch(props.data, () => {
  let chargeContainer = document.getElementById("chargeContainer");
  chargeChart = echarts.init(chargeContainer);
  let options = {
    grid: {
      left: '20%',
    },
    tooltip:{},
    color: ["#87CEFA", "#FF7F50", "#32CD32", "#DA70D6"],
    legend: {
      bottom: 25,
      itemWidth: 15,
      itemHeight: 8,
      itemGap: 6,
      textStyle: {
        color: "#D9DCE0",
        fontSize: 8
      },
    },
    xAxis: {
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'category',
      data: ['门诊人数(人)', '住院人次(人)', '人均费用(元)'],
      axisLabel: {
        color: '#D9DCE0',
        fontSize: 8
      }
    },
    series: props.data,
  };
  chargeChart.setOption(options);
});
onMounted(() => {
  window.addEventListener("resize", () => {
    chargeChart.resize()
  });
});
onUnmounted(() => {
  window.removeEventListener('resize')
  echarts.dispose(chargeChart);
  chargeChart = null;
});
</script>

<style lang="less" scoped></style>
